<!DOCTYPE html>
<html>
<head>
    <:include file="../common/css.html" title="订单管理"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card card-box-shadow">
    	<div class="layui-card-body">
    	    <!-- 表格工具栏 -->
	        <form class="layui-form toolbar" lay-filter="billTbSearchForm">
	            <div class="layui-form-item">
	                <div class="layui-inline">
	                    <label class="layui-form-label w-auto">名称：</label>
	                    <div class="layui-input-inline mr0">
	                        <input name="name" class="layui-input search_key" type="search" placeholder="名称"/>
	                    </div>
	                </div>
	                <div class="layui-inline">
	                    <button class="layui-btn icon-btn" lay-filter="billTbSearch" id="billTbSearch" lay-submit>
	                        <i class="layui-icon">&#xe615;</i>搜索
	                    </button>
	                </div>
	            </div>
	        </form>
	        <!-- 数据表格 -->
        	<table id="billTable" lay-filter="billTable"></table>
        </div>
    </div>
</div>
<!-- 表格操作列 -->
<script type="text/html" id="billTbBar">
	<% if(so.hasPermission("orderB:bill:update")){ %>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <% } %>
    <% if(so.hasPermission("orderB:bill:remove")){ %>
    <a class="layui-btn layui-btn-danger layui-btn-xs"
       data-dropdown="#billTbDelDrop{{d.LAY_INDEX}}" no-shade="true">删除</a>
    <% } %>
    <div class="dropdown-menu-nav dropdown-popconfirm dropdown-top-right layui-hide"
         id="billTbDelDrop{{d.LAY_INDEX}}"
         style="max-width: 200px;white-space: normal;min-width: auto;margin-left: 10px;">
        <div class="dropdown-anchor"></div>
        <div class="dropdown-popconfirm-title">
            <i class="layui-icon layui-icon-help"></i>
            确定要删除{{d.name}}吗？
        </div>
        <div class="dropdown-popconfirm-btn">
            <a class="layui-btn" btn-cancel>取消</a>
            <a class="layui-btn layui-btn-normal" lay-event="del">确定</a>
        </div>
    </div>
</script>
<!-- 表单弹窗 -->
<script type="text/html" id="billEditDialog">
    <form id="billEditForm" lay-filter="billEditForm" class="layui-form model-form">
        <input name="id" id="id" type="hidden"/>
        <input name="companyId" type="hidden"/>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">客户名称</label>
                <div class="layui-input-block">
                    <input id="customer" name="customer" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入客户名称"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">联系人</label>
                <div class="layui-input-block">
                    <input id="contacts" name="contacts" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入联系人"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">联系电话</label>
                <div class="layui-input-block">
                    <input id="contactsPhone" name="contactsPhone" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入联系电话"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">码头</label>
                <div class="layui-input-block">
                    <input id="dock" name="dock" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入码头"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">模糊地址</label>
                <div class="layui-input-block">
                    <input id="province" name="province" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入模糊地址"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">详细地址</label>
                <div class="layui-input-block">
                    <input id="address" name="address" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入详细地址"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">箱门重量</label>
                <div class="layui-input-block">
                    <input id="weight" name="weight" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入箱门重量"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">箱型</label>
                <div class="layui-input-block">
                    <input id="boxType" name="boxType" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入箱型"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">价格</label>
                <div class="layui-input-block">
                    <input id="price" name="price" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入价格"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">装箱日期(客户要求的装箱时间)</label>
                <div class="layui-input-block">
                    <input id="packDate" name="packDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入装箱日期(客户要求的装箱时间)"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">船名</label>
                <div class="layui-input-block">
                    <input id="vessel" name="vessel" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入船名"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">航次</label>
                <div class="layui-input-block">
                    <input id="voyage" name="voyage" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入航次"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">提单号</label>
                <div class="layui-input-block">
                    <input id="billOfLading" name="billOfLading" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入提单号"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">工厂地址</label>
                <div class="layui-input-block">
                    <input id="factoryAddress" name="factoryAddress" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入工厂地址"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">装箱人电话</label>
                <div class="layui-input-block">
                    <input id="factoryPhone" name="factoryPhone" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入装箱人电话"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">二维码</label>
                <div class="layui-input-block">
                    <input id="qrCode" name="qrCode" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入二维码"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">车队</label>
                <div class="layui-input-block">
                    <input id="carTeam" name="carTeam" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入车队"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">司机</label>
                <div class="layui-input-block">
                    <input id="driver" name="driver" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入司机"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">司机电话</label>
                <div class="layui-input-block">
                    <input id="driverPhone" name="driverPhone" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入司机电话"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">车牌</label>
                <div class="layui-input-block">
                    <input id="carNo" name="carNo" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入车牌"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">箱号</label>
                <div class="layui-input-block">
                    <input id="boxNum" name="boxNum" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入箱号"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">封号</label>
                <div class="layui-input-block">
                    <input id="sealno" name="sealno" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入封号"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">箱号封号图片</label>
                <div class="layui-input-block">
                    <input id="boxNumPic" name="boxNumPic" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入箱号封号图片"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到厂纬度</label>
                <div class="layui-input-block">
                    <input id="arrivedFactoryLatitude" name="arrivedFactoryLatitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到厂纬度"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到厂经度</label>
                <div class="layui-input-block">
                    <input id="arrivedFactoryLongitude" name="arrivedFactoryLongitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到厂经度"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到厂时间</label>
                <div class="layui-input-block">
                    <input id="arrivedFactoryDate" name="arrivedFactoryDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到厂时间"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到厂预警时间(默认提前一小时)</label>
                <div class="layui-input-block">
                    <input id="arrivedFactoryWarnDate" name="arrivedFactoryWarnDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到厂预警时间(默认提前一小时)"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">离厂时间</label>
                <div class="layui-input-block">
                    <input id="leavedFactoryDate" name="leavedFactoryDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入离厂时间"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">离厂经度</label>
                <div class="layui-input-block">
                    <input id="leavedFactoryLongitude" name="leavedFactoryLongitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入离厂经度"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">离厂纬度</label>
                <div class="layui-input-block">
                    <input id="leavedFactoryLatitude" name="leavedFactoryLatitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入离厂纬度"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到港时间</label>
                <div class="layui-input-block">
                    <input id="arrivedHarbourDate" name="arrivedHarbourDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到港时间"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到港纬度</label>
                <div class="layui-input-block">
                    <input id="arrivedHarbourLatitude" name="arrivedHarbourLatitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到港纬度"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-row">
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到港经度</label>
                <div class="layui-input-block">
                    <input id="arrivedHarbourLongitude" name="arrivedHarbourLongitude" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到港经度"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">到港预警时间(默认提前一小时)</label>
                <div class="layui-input-block">
                    <input id="arrivedHarbourWarnDate" name="arrivedHarbourWarnDate" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入到港预警时间(默认提前一小时)"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">状态:下单,做单,提箱,已到厂,已离厂,已进港,发起费用清单,客服审核,客户确认,结单</label>
                <div class="layui-input-block">
                    <input id="state" name="state" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入状态:下单,做单,提箱,已到厂,已离厂,已进港,发起费用清单,客服审核,客户确认,结单"/>
                </div>
            </div>
            <div class="layui-col-md3">
                <label class="layui-form-label layui-form-required">备注</label>
                <div class="layui-input-block">
                    <input id="remark" name="remark" type="text" class="layui-input"  autocomplete="off"
                    lay-verType="tips" lay-verify="" placeholder="请输入备注"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn" lay-filter="billEditSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        </div>
    </form>
</script>

<!-- js部分 -->
<:include file="../common/js.html"/>
<script type="text/javascript">
layui.use(['layer', 'form', 'table', 'tableX', 'util', 'admin','xmSelect','formX','dropdown','laydate'], function () {
let $ = layui.jquery;
let layer = layui.layer;
let form = layui.form;
let table = layui.table;
let tableX = layui.tableX;
let util = layui.util;
let admin = layui.admin;
let formX = layui.formX;
let xmSelect = layui.xmSelect;
let laydate = layui.laydate;

// 渲染表格
let insTb = tableX.render({
    elem: '#billTable'
    ,url: 'bill/page'
    ,page: true
    ,height: 'full-100'
    ,toolbar: ['<p>',
        <% if(so.hasPermission("orderB:bill:save")){ %>
        '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
        <% } %>
        <% if(so.hasPermission("orderB:bill:remove")){ %>
        '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
        <% } %>
        '</p>'].join('')
    ,cellMinWidth: 100
    ,cols: [[
        {type: 'checkbox'}
        ,{type: 'numbers'}
        ,{field: "customer",  title: "客户名称", sort: true, hide:false }
        ,{field: "contacts",  title: "联系人", sort: true, hide:false }
        ,{field: "contactsPhone",  title: "联系电话", sort: true, hide:false }
        ,{field: "dock",  title: "码头", sort: true, hide:false }
        ,{field: "province",  title: "模糊地址", sort: true, hide:true }
        ,{field: "address",  title: "详细地址", sort: true, hide:true }
        ,{field: "weight",  title: "箱门重量", sort: true, hide:true }
        ,{field: "boxType",  title: "箱型", sort: true, hide:true }
        ,{field: "price",  title: "价格", sort: true, hide:true }
        ,{field: "packDate",  title: "装箱日期(客户要求的装箱时间)", sort: true, hide:true }
        ,{field: "vessel",  title: "船名", sort: true, hide:true }
        ,{field: "voyage",  title: "航次", sort: true, hide:true }
        ,{field: "billOfLading",  title: "提单号", sort: true, hide:true }
        ,{field: "factoryAddress",  title: "工厂地址", sort: true, hide:true }
        ,{field: "factoryPhone",  title: "装箱人电话", sort: true, hide:true }
        ,{field: "qrCode",  title: "二维码", sort: true, hide:true }
        ,{field: "carTeam",  title: "车队", sort: true, hide:true }
        ,{field: "driver",  title: "司机", sort: true, hide:true }
        ,{field: "driverPhone",  title: "司机电话", sort: true, hide:true }
        ,{field: "carNo",  title: "车牌", sort: true, hide:true }
        ,{field: "boxNum",  title: "箱号", sort: true, hide:true }
        ,{field: "sealno",  title: "封号", sort: true, hide:true }
        ,{field: "boxNumPic",  title: "箱号封号图片", sort: true, hide:true }
        ,{field: "arrivedFactoryLatitude",  title: "到厂纬度", sort: true, hide:true }
        ,{field: "arrivedFactoryLongitude",  title: "到厂经度", sort: true, hide:true }
        ,{field: "arrivedFactoryDate",  title: "到厂时间", sort: true, hide:true }
        ,{field: "arrivedFactoryWarnDate",  title: "到厂预警时间(默认提前一小时)", sort: true, hide:true }
        ,{field: "leavedFactoryDate",  title: "离厂时间", sort: true, hide:true }
        ,{field: "leavedFactoryLongitude",  title: "离厂经度", sort: true, hide:true }
        ,{field: "leavedFactoryLatitude",  title: "离厂纬度", sort: true, hide:true }
        ,{field: "arrivedHarbourDate",  title: "到港时间", sort: true, hide:true }
        ,{field: "arrivedHarbourLatitude",  title: "到港纬度", sort: true, hide:true }
        ,{field: "arrivedHarbourLongitude",  title: "到港经度", sort: true, hide:true }
        ,{field: "arrivedHarbourWarnDate",  title: "到港预警时间(默认提前一小时)", sort: true, hide:true }
        ,{field: "state",  title: "状态:下单,做单,提箱,已到厂,已离厂,已进港,发起费用清单,客服审核,客户确认,结单", sort: true, hide:true }
        ,{field: "remark",  title: "备注", sort: true, hide:true }
        ,{field: "createTime",  title: "创建时间", sort: true, hide:true ,templet: function (d) {
                return util.toDateString(d.createTime);
            }
        }
        ,{field: "createUser",  title: "创建人", sort: true, hide:true }
        ,{field: "updateTime",  title: "更新时间", sort: true, hide:true ,templet: function (d) {
                return util.toDateString(d.createTime);
            }
        }
        ,{field: "updateUser",  title: "更新人", sort: true, hide:true }
        ,{field: "deleted",  title: "del(0正常 1删除)", sort: true, hide:true }
        ,{title: '操作', toolbar: '#billTbBar', align: 'center', minWidth: 200, fixed: 'right'}
    ]]
});

//监听行双击
table.on('rowDouble(billTable)', function(obj){
    let data = obj.data;
    showEditModel(data);
    // obj.tr.find("a[lay-event=edit]").trigger("click");//会跳出来两个一样的框 这个不好用
    //obj.tr.toggleClass('layui-table-click').siblings().removeClass('layui-table-click');//选中行
});


// 搜索
form.on('submit(billTbSearch)', function (data) {
    insTb.reload({where: data.field, page: {curr: 1}});
    return false;
});

$('.search_key').bind('keypress',function(event){
    if(event.keyCode == "13")
    {
        $("#billTbSearch").click();
    }
});

// 工具条点击事件
table.on('tool(billTable)', function (obj) {
    if ('edit' === obj.event) { // 修改
        showEditModel(obj.data);
    } else if ('del' === obj.event) { // 删除
        doDel(obj);
    }
});

/* 表格头工具栏点击事件 */
table.on('toolbar(billTable)', function (obj) {
    if ('add' === obj.event) { // 添加
        showEditModel();
    } else if ('del' === obj.event) { // 删除
        let checkRows = table.checkStatus('billTable');
        if (!checkRows || !checkRows.data || 0 === checkRows.data.length) {
            return layer.msg('请选择要删除的数据', {icon: 2, anim: 6});
        }
        let ids = checkRows.data.map(function (d) {
            return d.id;
        });
        doDel({ids: ids});
    }
});


// 显示编辑弹窗
function showEditModel(mData) {
    admin.open({
        type: 1,
        title: (mData ? '修改' : '添加') + '订单管理',
        maxmin:true,
        closeBtn:1,
        resize: true,
        shade: [0.8, "#393D49"],
        shadeClose:true,
        area:["1100px","500px"],
        content: $('#billEditDialog').html(),
        success: function (layero, dIndex) {
            // 回显表单数据
            form.val('billEditForm', mData);
            // 表单提交事件
            form.on('submit(billEditSubmit)', function (data) {
                let loadIndex = layer.load(2);
                admin.req(mData ? 'bill/update' : 'bill/save', data.field, function (res) {
                    layer.close(loadIndex);
                    if (0 === res.code) {
                         layer.close(dIndex);
                        layer.msg(res.msg, {icon: 1});
                        insTb.reload({page: {curr: 1}});
                    } else {
                        layer.msg(res.msg, {icon: 2, anim: 6});
                    }
                }, 'post');
                $("button[lay-filter='billEditSubmit']").attr("disabled","disabled");
                setTimeout(function(){$("button[lay-filter='billEditSubmit']").removeAttr("disabled");}, 1000 );
                return false;
            });
            // 禁止弹窗出现滚动条
            //$(layero).children('.layui-layer-content').css('overflow', 'visible');
        }
    });
}

// 删除
function doDel(obj) {
    if (obj.ids) {  // 批量删除
        admin.confirm('确定要删除选中数据吗？', function (i) {
            layer.close(i);
            let loadIndex = layer.load(2);
            admin.req('bill/removeBatch', JSON.stringify(obj.ids), function (res) {
                layer.close(loadIndex);
                if (0 === res.code) {
                    layer.msg(res.msg, {icon: 1});
                    insTb.reload({page: {curr: 1}});
                } else {
                    layer.msg(res.msg, {icon: 2, anim: 6});
                }
            }, 'post');
        });
    } else {  // 单个删除
         let loadIndex = layer.load(2);
         $.get('bill/remove', {id: obj.data.id}, function (res) {
             layer.close(loadIndex);
             if (0 === res.code) {
                 layer.msg(res.msg, {icon: 1});
                 insTb.reload({page: {curr: 1}});
             } else {
                 layer.msg(res.msg, {icon: 2, anim: 6});
             }
         });
     }
}
});
</script>
</body>
</html>
